<template>
    <el-card class="wly-page">
        <!-- 位置导航 v-header -->
        <v-header title="PcjAdhocTest"></v-header>
        <!-- 查询区域 -->
        <!--        <div class="table-page-search-wrapper" style="height: 50px;">-->
        <!--            <el-form style="height: 40px;" layout="inline" @keyup.enter.native="searchQuery" ref="queryForm" :model="queryParam">-->
        <!--                <el-row style="height: 40px;" :gutter="24">-->
        <!--        </el-row>-->
        <!--    </el-form>-->
        <!--</div>-->
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator" style="margin-top: 5px;">
            <el-container>
                <AButton button-name="新增" @click="handleAdd" icon="el-icon-plus"></AButton>
                <AButton @click="print" style= "margin-left: 5px" button-name="打印" icon="el-icon-printer">打印</AButton>
                <AButton button-name="导出" style= "margin-left: 5px" icon="el-icon-download" @click="handleExportXls('测试')">导出</AButton>
                <ADropdown style= "margin-left: 5px" :isUseButton="isUseButton" :options="list" title="批量操作" @operFunc="operFunc"></ADropdown>
            </el-container>
        </div>

        <!-- table区域-begin -->
        <div style="margin-top: 5px;">
            <div class="el-alert" style="margin-bottom: 16px;">
                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600; color: #1890FF;">{{multipleSelection.length}}</a>项
                <a style="margin-left: 24px; color: #1890FF;" @click="onClearSelected">清空</a>
            </div>
            <ATable
                ref ="table"
                :selectedData ="selectedData"
                :tableData ="dataSource"
                :height="height"
                :columns ="columns"
                :recordNumber="recordNumber"
                :ifUseTableBase ="ifUseTableBase"
                :ifUseTableButton= "ifUseTableButton"
                :ifUseTableRodio="ifUseTableRodio"
                :ifUseTableOrder = "ifUseTableOrder"
                @getData = getTableList
                @handleEdit = handleEdit
                @handleDetail = handleDetail
                @handleDelete = handleDelete
                @getSelectRows = handleSelectionChange
            >
            </ATable>
        </div>
        <pcj-adhoc-test-form ref="modalForm" @ok="modalFormOk" :dataSource="dataSource"></pcj-adhoc-test-form>
    </el-card>
</template>

<script>
    import ajax from '@api/ajax'
    import Msg from '@asst/js/msg'
    import PcjAdhocTestForm from './modules/PcjAdhocTestForm'
    export default {
        name: 'PcjAdhocTestList',
        components: {
            PcjAdhocTestForm
        },
        data () {
            return {
                ifUseTableButton: true,
                ifUseTableRodio: true,
                ifUseTableBase: true,
                ifUseTableOrder: false,
                isUseButton: true,
                selectedData:[],
                queryParam: {},
                dataSource: [],
                recordNumber:0,
                multipleSelection: [],
                height: 450,
                tableLoading: true,
                list:[{
                    value: '删除',
                    key: 'batchDel'
                }],
                // 表头
                columns: [
                    {
                        title: '名称',
                        dataIndex: 'name',
                        align: 'center'
                    },
                    {
                        title: '角色',
                        dataIndex: 'role',
                        align: 'center'
                    },
                    {
                        title: '部门',
                        dataIndex: 'depart',
                        align: 'center'
                    },
                    {
                        title: '年龄',
                        dataIndex: 'age',
                        align: 'center'
                    },

                ],
                url: {
                    list: "adhoc/pcjAdhocTest/list.do",
                    delete: "adhoc/pcjAdhocTest/delete.do",
                    deleteBatch: "adhoc/pcjAdhocTest/deleteBatch.do",
                    exportXlsUrl: "adhoc/pcjAdhocTest/exportXls.do",
                    add: "adhoc/pcjAdhocTest/add.do"
                }
            }
        },
        created() {
            this.getTableList();
        },
        computed: {
            importExcelUrl: function(){
                return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
            },
        },
        methods: {
            handleSelectionChange (val) {
                this.multipleSelection = val
            },
            batchDel () {
                Msg.confirm('是否删除选中数据？', {
                    onConfirm: () => {
                        ajax.post(this.url.deleteBatch, this.multipleSelection).then(res => {
                            debugger
                            this.$message.success('删除成功！')
                            this.onClearSelected();
                        }).catch(err => {
                            this.$message.fail(err)
                        }).finally(() => {
                            this.getTableList()
                        })
                    }
                })
            },
            onClearSelected () {
                this.$refs.table.clearSelection()
            },
            // 字典翻译
            showDictValue (val, dictArr) {
                if(val != '') {
                    return dictArr.filter(item => item.value = val)[0].content
                }
            },
            // 初始化表格
            getTableList (data) {
                this.tableLoading = true
                debugger
                if(data != null && data.pageNo != null && data != undefined){
                    this.queryParam = {
                        pageNo: data.pageNo,
                        pageSize: data.pageSize
                    }
                } else {
                    this.queryParam = {
                        pageNo: 1,
                        pageSize: 15
                    }
                }

                ajax.post(this.url.list, this.queryParam).then(res => {
                    this.dataSource = res.data.records
                    this.recordNumber = res.data.recordNumber

                }).catch(err => {
                    console.error(err, '查询错误')
                }).finally(() => {
                    this.tableLoading = false
                })

            },
            // 查询操作
            searchQuery () {
                this.getTableList()
            },
            // 重置操作
            searchReset () {
                this.queryParam = {}
                this.getTableList()
            },
            // 打印操作
            print () {

            },
            // 新增操作
            handleAdd () {
                this.$refs.modalForm.add()
            },
            //导出
            handleExportXls () {
                //新打开一个页面
                window.open(this.url.exportXlsUrl);
            },
            // 编辑操作
            handleEdit (row) {
                this.$refs.modalForm.edit(row)
            },
            //详情
            handleDetail (row) {
                this.$refs.modalForm.detail(row)
            },
            modalFormOk () {
                this.getTableList()
            },
            //删除
            handleDelete(row){
                Msg.confirm('是否删除该条数据？', {
                    onConfirm: () => {
                        ajax.post(this.url.delete, row).then(res => {
                            this.$message.success('删除成功！')
                        }).catch(err => {
                            console.error(err, '删除失败！')
                        }).finally(() => {
                            this.getTableList()
                        })
                    }
                })
            },
            // 批量方法
            operFunc(val){
                debugger
                if(val == 'batchDel'){
                    this.batchDel();
                }
            }
        }
    }
</script>
<style scoped>
    .table-page-search-wrapper{
        margin: 8px 0 0 8px;
    }
    .table-operator{
        display: inline-block;
        margin-bottom: 10px;
    }
    .el-alert{
        background-color: #e6f7ff;
        border: 1px solid #91d5ff;
    }
    .el-add{
        margin-right: 10px;
    }
    .el-export{
        margin: 5px 5px 5px 5px;
    }
    .j-table-force-nowrap{
        margin-top: 5px;
    }
    ::v-deep th {
        text-align: center;
    }
    ::v-deep td {
        text-align: center;
    }

    .el-pagination{
        margin-top: 10px;
    }
    .el-button--primary:hover{
        background-color: #328fce;
        border-color: #328fce;
    }
    .el-button--primary:focus {
        background-color: #328fce;
        border-color: #328fce;
    }
    .el-button--default:hover{
        background-color: #ffffff;
        border-color: #ffffff;
    }
    .el-button--default:focus{
        background-color: #ffffff;
        border-color: #ffffff;
    }

</style>
